<template>
  <div class="operators">
    <div class="icon i-left" @click="changePlayModeAction">
      <i class="iconfont" :class="palyModeIcon"></i>
    </div>
    <div class="icon i-left" @click="prevAction">
      <i class="iconfont icon-shangyishoushangyige"></i>
    </div>
    <div class="icon i-center" @click="playChangAction">
      <i class="iconfont" :class="{'icon-zanting1':playing,'icon-zanting2':!playing}"></i>
    </div>
    <div class="icon i-right" @click="nextAction">
      <i class="iconfont icon-xiayigexiayishou"></i>
    </div>
    <div class="icon i-right" @click="popupBottom">
      <i class="iconfont icon-liebiao"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
    }
  },
  methods: {
    // 切换播放模式
    changePlayModeAction () {
      this.$store.commit({
        type: 'player/changePlayModeAction'
      })
    },
    // 点击上一首
    prevAction () {
      this.$store.commit({
        type: 'player/switchPlayMusic',
        switchMUsic: 'prev'
      })
    },
    playChangAction () {
      this.$store.commit({
        type: 'player/setPlaying',
        value: !this.playing
      })
    },
    // 点击下一首
    nextAction () {
      this.$store.commit({
        type: 'player/switchPlayMusic',
        switchMUsic: 'next'
      })
    },
    popupBottom () {
      this.$emit('popupBottom', true)
    }
  },
  computed: {
    palyModeIcon () {
      if (this.mode === 0) {
        return ' icon-hanhan-01-01'
      } else if (this.mode === 1) {
        return ' icon-bofang-xunhuanbofang'
      }
      return ' icon-hanhan-01-011'
    },
    ...mapState({
      playing: (state) => state.player.playing,
      mode: (state) => state.player.mode
    })
  }
}
</script>

<style scoped lang="less">
.operators {
  display: flex;
  align-items: center;
  .icon {
    font-weight: normal;
    flex: 1;
    color: #2e3030;
    text-align: center;
    .iconfont {
      font-size: 30px;
    }
  }
}
</style>
